import React, { Component } from 'react';
import {inject, observer} from 'mobx-react';

@inject('apple')
@observer
class Apple extends Component{
    render(){
        const {appleFilter, addApple, eatApple, currentApples, eatApples} = this.props.apple;
        return  <div className="appleBusket">
            <div className="title">苹果篮子</div>
            <div className="stats">
                <div className="section">
                    <div className="head">当前</div>
                    <div className="content">
                        {currentApples.num}个苹果，{currentApples.weight}克
                    </div>
                </div>
                <div className="section">
                    <div className="head">已吃掉</div>
                    <div className="content">
                        {eatApples.num}个苹果，{eatApples.weight}克
                    </div>
                </div>
            </div>
            <div className="appleList">
                {appleFilter.map(apple => (
                    <div className="appleItem" key={apple.appNo}>
                        <div className="apple">
                            <img src='apple.png' alt="" />
                        </div>
                        <div className="info">
                            <div className="name">红苹果 - {apple.appNo}号</div>
                            <div className="weight">{apple.weight}克</div>
                        </div>
                        <div className="btn-div">
                            <button onClick={() => eatApple(apple.appNo)}> 吃掉 </button>
                        </div>
                    </div>
                ))}

            </div>
            <div className="btn-div">
                <button  onClick={addApple} >摘苹果</button>
            </div>
         </div>
    }
}

export default Apple;
